<template>
    <el-menu
        :default-active="activeIndex"
        :collapse="isCollapse"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :default-openeds="openMenus"
        class="fixed-width-menu"
    >
        <el-menu-item index="/home">
            <i class="el-icon-house"></i>
            <span slot="title">首页</span>
        </el-menu-item>
<!--        :index="`menu-${index}`-->
        <el-submenu v-for="(menu, index) in filteredMenus" :key="index" :index="`menu-${menu.id}`">
            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ menu.title }}</span>
            </template>
            <el-menu-item v-for="(item, itemIndex) in menu.items" :key="itemIndex" :index="item.route">
                {{ item.title }}
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
import menus from '@/data/sidebar.json';
// import {getUserInfo} from "@/views/utils/userUtil";

export default {
    name: 'SideBar',
    data() {
        return {
            menus,
            userInfo: {},
            isCollapse: false,
        };
    },
    created() {
        // this.userInfo = getUserInfo();
    },
    computed: {
        filteredMenus() {
            if (!this.userInfo || !this.userInfo.userType) {
                return [];
            }
            // 根据 userInfo.userType 过滤菜单
            return this.menus.filter(menu => {
                    return menu.userTypes.includes(this.userInfo.userType);
            });

            // return this.menus;
        },
        activeIndex() {
            // 根据当前路由动态设置激活的菜单项
            return this.$route.path;
        },
        openMenus() {
            // 计算需要展开的子菜单
            const openMenus = [];
            // 如果菜单未折叠，则找出应该展开的子菜单索引
            if (!this.isCollapse) {
                const activeMenu = this.menus.find(menu =>
                    menu.items.some(item => item.route === this.$route.path)
                );
                if (activeMenu) {
                    // openMenus.push(`menu-${this.menus.indexOf(activeMenu)}`);
                    openMenus.push(`menu-` + activeMenu.id);
                }
            }
            return openMenus;
        },
    },
    methods: {
        handleSelect(index) {
            // 如果已经在当前路由，无需再次跳转
            if (this.$route.path !== index) {
                this.$router.push(index).catch(err => {
                    if (err.name !== 'NavigationDuplicated') {
                        console.error(err);
                    }
                });
            }
        },
    },
};
</script>

<style scoped>
/* 定义一个固定宽度的菜单 */
.fixed-width-menu {
    width: 200px;
    min-width: 200px; /* 确保最小宽度也为200px */
}
/* 定制边栏样式 */
.el-menu {
    background-color: #545c64;
    color: #fff;
    border-right: none; /* 移除右边框 */
}

.el-menu-item, .el-submenu__title {
    color: #fff;
}

.el-menu-item:focus, .el-menu-item:hover, .el-submenu__title:focus, .el-submenu__title:hover {
    background-color: #666d77;
    color: #ffd04b;
}

.el-menu-item.is-active, .el-menu-item.is-active:hover {
    background-color: #ffd04b;
    color: #545c64;
}
</style>